<template>
    <div class="lottery">
        <header>
            <img src="//common-1253410441.file.myqcloud.com/activityimg/20171017114157.png" alt="">
            <button @click="jumpmyjp"/>
        </header>
        <section class='lotterycon'>
            <img src="//common-1253410441.file.myqcloud.com/activityimg/20171017114158.png" alt="">
            <span class="lefttip" v-on:click="modalchice=true">更多机会>></span>
            <aside>
                <h5>您今天还有 <strong>{{Count}}</strong> 次机会</h5>
                <ul>
                    <li v-for="(item,iindex) in lis1" :class="{active:iindex===index}">
                        <img :src='item.img' alt="">
                    </li>
                    <li :class="{active:index===7}">
                        <img src="//common-1253410441.costj.myqcloud.com/activityimg/pic3.png" alt="">
                    </li>
                    <li v-on:click="startLottery">
                        <img src="//common-1253410441.costj.myqcloud.com/activityimg/bton.png"
                             v-if="Count>0&&click"
                             alt="">
                        <img src="//common-1253410441.costj.myqcloud.com/activityimg/btoff.png" v-else alt="">
                    </li>
                    <li :class="{active:index===3}">
                        <img
                                src="//common-1253410441.costj.myqcloud.com/activityimg/pic3.png" alt=""></li>
                    <li v-for="(item,iindex) in lis2" :class="{active:(6-iindex)===index}">
                        <img :src='item.img' alt="">
                    </li>
                </ul>
            </aside>
        </section>
        <footer>
            <div class="notice">
                <icon name="notice"/>
                <div class="marquee">
                    <marquee>
                        <marquee-item v-for="(item , i) in Item" :key="i"
                                      @click.native="onClick(i)"
                                      class="align-middle">
                            {{item.NickName}}购买竞彩,抽中了{{item.Money}}元红包
                        </marquee-item>
                    </marquee>
                </div>
            </div>
            <article>
                <img src="//common-1253410441.file.myqcloud.com/activityimg/20171017114159.png" alt="">
                <p><label>1、</label> <span>所有新老用户均可参加活动</span></p>
                <p><label>2、</label> <span>活动期间，每人每日最多可得5次抽奖机会。<br>
                    (1)进入本活动页可获得1次免费抽奖机会；<br>
                    (2)当天购买竞彩足球、竞彩篮球的出票订单每满20元即 获得1次抽奖机会，最多累加4次；</span></p>
                <p>
                    <label>3、</label><span>转盘抽奖百分百中奖。抽中“随机红包”为不固定的随机红包，听说有惊喜哦</span>
                </p>
                <p>
                    <label>4、</label><span>抽奖机会限当天使用，不累加，逾期自动作废</span>
                </p>
                <p>
                    <label>5、</label><span>此活动解释权归本站所有，若有疑问请联系客服</span>
                </p>
                <p>
                    <span>声明：本活动苹果公司不是发起者，也没有以任何方式参与活动。</span>
                </p>

            </article>
        </footer>
        <div class="getmochice" v-if="modalchice===true">
            <div>
                <img src="//common-1253410441.costj.myqcloud.com/activityimg/20171017173114.png" alt="">
                <i v-on:click="modalchice = false"/>
                <p>
                    <button @click="nativetonative(jumptype[2])"/>
                    <button @click="nativetonative(jumptype[1])"/>
                </p>
            </div>
        </div>
        <div class="successmodel" v-if="successmodel===true">
            <div>
                <img src="//common-1253410441.costj.myqcloud.com/activityimg/20171017175132.png" alt="">
                <i v-on:click="successmodel = false"/>
                <span>{{Money}}</span>
                <p>
                    <button @click="jumpmyjp"/>
                    <button @click="successmodel=false"/>
                </p>
            </div>
        </div>
    </div>

</template>

<script>
    import {Marquee, MarqueeItem, Toast} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast
        },
        data() {
            return {
                index: -1,    // 当前转动到哪个位置，起点位置
                count: 8,    // 总共有多少个位置
                timer: 0,    // 每次转动定时器
                speed: 200,   // 初始转动速度
                times: 0,    // 转动次数
                cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize: -1,   // 中奖位置
                Count: 0,
                click: true,
                Item: [],
                Money: 0.6,
                modalchice: false,
                showToast: false,
                successmodel: false,
                toastType: 'luck',
                token: null,
                namesource,
                jumptype,
                lists: [
                    {
                        id: 1,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic2.png'
                    }, {
                        id: 2,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic4.png'
                    }, {
                        id: 3,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic1.png'
                    }, {
                        id: 4,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic3.png'
                    }, {
                        id: 5,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic2.png'
                    }, {
                        id: 6,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic5.png'
                    }, {
                        id: 7,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic1.png'
                    }, {
                        id: 8,
                        img: '//common-1253410441.costj.myqcloud.com/activityimg/pic3.png'
                    }
                ]
            };
        },
        created() {
            this.getdata();
        },
        computed: {
            lis1() {
                return this.lists.slice(0, 3);
            },
            lis2() {
                return this.lists.slice(4, 7).reverse();
            }
        },
        methods: {
            /**
             * 获取一些初始化信息
             */
            nativetonative,
            h5tonative,
            getdata: async function () {
                var that = this;
                const {token}=await getMytoken(true);
                const {data}=await axios.get(`/hd/Handler.ashx?action=1134&params={}`);
                if(data && data.code === 0) {
                    that.Item = data.data.Item;
                }
                axios.get(`/hd/Handler.ashx?action=1131&params={"UserCode":"${token}"}`)
                        .then(function ({data}) {
                            if(data && data.code === 0) {
                                that.Count = data.data.Count;
                                that.Item = data.data.Item;
                                that.token = token;
                                that.click = true;
                            }
                            else {
                                that.click = false;
                            }

                            console.log(that.Item);
                        })
                        .catch(function (error) {
                            that.click = false;
                            console.log(error);
                        })
            },
            closemodalchice(){
                this.modalchice = false;
            },
            jumpmyjp(){
                if(!this.token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                    return;
                }
                h5tonative('我的奖品', `${location.origin}/tg/#/lotteryhb`)
            },
            startLottery: async function () {// 开始抽奖
                if(!this.token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    })
                }
                if(!this.click || this.Count < 1) {
                    return
                }
                this.closeToast();
                this.speed = 200;
                this.click = false;
                var that = this;
                axios.get(`/hd/Handler.ashx?action=1132&params={"UserCode":"${this.token}"}`)
                        .then(function ({data}) {
                            that.Count = data.data.Count;
                            that.Item = data.data.Item;
                            that.prize = data.data.ReturnNum;
                            that.Money = data.data.Money;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                this.startRoll()
            },
            // 开始转动
            startRoll () {
                this.times += 1;  // 转动次数
                this.oneRoll();  // 转动过程调用的每一次转动方法，这里是第一次调用初始化

                // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
                if(this.times > this.cycle + 10 && this.prize === this.index) {
                    clearTimeout(this.timer);   // 清除转动定时器，停止转动
                    this.prize = -1;
                    this.times = 0;
                    this.click = true;
//                    this.successmodel = true;
                    this.toastType = 'comeOn';
                    setTimeout(()=> {
                        this.successmodel = true
                    }, 800);
                } else {
                    if(this.times < this.cycle) {
                        this.speed -= 10;   // 加快转动速度
                    }
                    else if(this.times === this.cycle) {    // 随机获得一个中奖位置
                        console.log(`中奖位置${this.prize}`)
                    } else if(this.times > this.cycle + 10 &&
                            ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
                        this.speed += 110
                    } else {
                        this.speed += 20
                    }

                    if(this.speed < 40) {
                        this.speed = 40
                    }
                    this.timer = setTimeout(this.startRoll, this.speed)
                }
            },

            // 每一次转动
            oneRoll () {
                let index = this.index;  // 当前转动到哪个位置
                const count = this.count;  // 总共有多少个位置
                index += 1;
                if(index > count - 1) {
                    index = 0
                }
                this.index = index
            },

            // 关闭弹出框
            closeToast () {
                this.showToast = false
            },
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .lottery {
        button {
            background: transparent;
            border: none;
        }
        background: #ba004e;
        img {
            width: 100%;
            display: block;
        }
        header {
            position: relative;
            button {
                position: absolute;
                width: 66px;
                height: 186px;
                right: 0;
                top: 22px;
                background: transparent;
            }

        }
        .lotterycon {
            position: relative;
            .lefttip {
                position: absolute;
                right: 24px;
                top: 18px;
                font-size: 24px;
                color: #fff;
                z-index: 1;
                /*text-decoration: underline;*/
            }
            aside {
                position: absolute;
                width: 600px;
                left: 50%;
                top: 0;
                margin-left: -300px;
                h5 {
                    height: 90px;
                    font-size: 36px;
                    color: #e52819;
                    text-align: center;
                    strong {
                        font-size: 58px;
                        color: #fffc01;
                        font-weight: bold;
                    }
                }
                ul {
                    width: 620px;
                    margin-top: 16px;
                    margin-left: 4px;
                    li {
                        height: 160px;
                        width: 194px;
                        float: left;
                        background: url(//common-1253410441.costj.myqcloud.com/activityimg/bgoff.png);
                        background-size: cover;
                        margin: 4px 0 0 4px;
                        &.active {
                            background: url(//common-1253410441.costj.myqcloud.com/activityimg/bgon.png);
                            background-size: cover;
                        }
                    }
                }
            }
        }
        footer {
            .notice {
                display: block;
                margin: 0 auto;
                margin-top: 24px;
                width: 596px;
                height: 48px;
                line-height: 48px;
                background: #fef4ae;
                color: #ff1a45;
                border-radius: 50px;
                padding: 0 30px;
                svg {
                    float: left;
                    width: 40px;
                    height: 40px;
                    margin-top: 3px;
                }
                .marquee {
                    font-size: 27px;
                    float: left;
                }

            }
            article {
                margin-top: 50px;
                padding: 0 50px;
                padding-bottom: 40px;
                p {
                    display: flex;
                    color: #fff;
                    font-size: 26px;
                    margin-bottom: 24px;
                }
            }
        }
        .getmochice {
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .6);
            div {
                position: relative;
                top: 10%;
                i {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    right: 20px;
                    top: 0;
                }
                p {
                    position: absolute;
                    width: 644px;
                    left: 50%;
                    margin-left: -322px;
                    display: flex;
                    bottom: 64px;
                    button {
                        height: 80px;
                        flex: 1;
                    }
                }
            }
        }
        .successmodel {
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .6);
            div {
                position: relative;
                top: 10%;
                i {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    right: 20px;
                    top: 0;
                }
                span {
                    position: absolute;
                    width: 150px;
                    bottom: 390px;
                    left: 50%;
                    margin-left: -75px;
                    font-size: 80px;
                    color: #df3c5c;
                    text-align: center;
                    font-weight: bold;
                }
                p {
                    position: absolute;
                    width: 644px;
                    left: 50%;
                    margin-left: -322px;
                    display: flex;
                    bottom: 44px;
                    button {
                        height: 80px;
                        flex: 1;
                    }
                }
            }
        }
    }

</style>